<template>
  <div style="width: 100%; height: 100%;">
    <!-- 中间模块 -->
    <div class="center-modules">
      <div class="center-modules01">
        <div class="center-modules01-01">
          <div class="title"><div class="title-inner">通话状态</div></div>
          <div class="content" v-if="!!callStatusData">
            <div class="count-box">
              <div class="count-box-item">
                <div class="count-box-img"><img src="./img/connect.png" /></div>
                <div class="count-box-text">
                  <p>已接通</p>
                  <p class="number">{{callStatusData.connect}}</p>
                </div>
              </div>
              <div class="count-box-item item-error">
                <div class="count-box-img"><img src="./img/unconnect.png" /></div>
                <div class="count-box-text">
                  <p>未接通</p>
                  <p class="number">{{callStatusData.unconnect}}</p>
                </div>
              </div>
            </div>

            <div class="count-detail-list">
              <div class="count-detail-item">
                <div class="count-detail-icon">
                  <i class="el-icon-phone-outline" style="color: #F56C6C"></i>
                </div>
                <p class="count-detail-text">忙音（拒绝接听）</p>
                <p class="number">{{callStatusData.reject}}</p>
                <p class="count-detail-text">个</p>
              </div>
              <div class="count-detail-item">
                <div class="count-detail-icon">
                  <i class="el-icon-phone" style="color: #E6A23C"></i>
                </div>
                <p class="count-detail-text">空号（通话异常）</p>
                <p class="number">{{callStatusData.invalid}}</p>
                <p class="count-detail-text">个</p>
              </div>
              <div class="count-detail-item">
                <div class="count-detail-icon">
                  <i class="el-icon-phone-outline" style="color: #F56C6C"></i>
                </div>
                <p class="count-detail-text">挂断</p>
                <p class="number">{{callStatusData.hangup}}</p>
                <p class="count-detail-text">个</p>
              </div>
            </div>
          </div>
        </div>
        <div class="center-modules01-02">
          <div class="title"><div class="title-inner">诈骗类型</div></div>
          <div class="content">
            <!--            {{fraudTypeData}}-->
            <div class="progress-container" id="pieCharts">

            </div>
            <!--            <div class="progress-container">-->
            <!--              <div class="progress-item" v-for="(progress, index) in fraudTypeData" :key="index">-->
            <!--                <span class="label">{{ progress.name }}</span>-->
            <!--                <div class="progress-bar">-->
            <!--                  <div class="progress" :style="{ width: progress.value + '%' }">-->
            <!--                    <div class="progress-bg"></div>-->
            <!--                  </div>-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </div>-->
          </div>
        </div>
      </div>
      <div class="center-modules02">
        <div class="title"><div class="title-inner">反诈AI</div></div>
        <div class="content" :class="{'warning-border': (riskLevel === '中' && callDetailData.length > 1), 'error-border': (riskLevel === '高' && callDetailData.length > 1)}">
          <div class="risk-level">
            <el-alert
              v-if="callDetailData.length > 1"
              :title="`风险等级:${riskLevel}`"
              :type="riskLevel === '高' ? 'error' : riskLevel === '低' ? 'success' : 'warning'"
              center
              :closable="false"
              effect="dark"
              size="small"
              show-icon>
            </el-alert>
          </div>
          <div class="chat-container" ref="messageList">
            <div class="message" v-for="(msg, index) in callDetailData" :key="index" :class="msg.packType === 1 && msg.data.talkType === 1 ? 'user' : 'admin'">
              <template v-if="msg.packType === 1">
                <!-- 用户头像和消息 -->
                <div class="avatar">
                  <img v-if="msg.data.talkType === 1" src="./img/avatar.png" />
                  <img v-else-if="msg.data.talkType === 2" src="./img/cop.png" />
                </div>
                <div class="message-content">
                  <!-- <div class="message-header">
                    <span class="name">{{ msg.name }}</span>
                    <span class="timestamp">{{ msg.timestamp }}</span>
                  </div> -->
                  <div class="message-body">
                    <div class="speech-icon" v-if="msg.isSpeech">
                      <i class="icon-voice"></i>
                    </div>
                    <p>{{ msg.data.talkContent }}</p>
                  </div>
                </div>
              </template>
              <div class="message-line" v-show="msg.packType === 0">开启新会话</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部模块 -->
    <div class="bottom-modules">
      <div class="bottom-modules01">
        <div class="title">
          <div class="title-inner">
            <span>
              已完成
            </span>
            <span>
              <el-tabs size="small" type="card">
                <el-tab-pane label="日" name="first"></el-tab-pane>
                <el-tab-pane label="周" name="second"></el-tab-pane>
                <el-tab-pane label="月" name="third"></el-tab-pane>
              </el-tabs>
            </span>
          </div>
        </div>
        <div class="content">
          <el-table :data="connectData" style="width: 100%" height="120">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column prop="callee" label="被叫号码" width="120"></el-table-column>
            <el-table-column label="风险评级" prop="riskLevel" width="120">
              <template #default="scope">
                <el-tag size="mini" :type="['高'].includes(scope.row.riskLevel) ? 'danger' : ['中'].includes(scope.row.riskLevel) ? 'warning' : 'success' ">{{scope.row.riskLevel}}</el-tag>
              </template>

            </el-table-column>
            <el-table-column prop="type" label="诈骗类型"></el-table-column>
            <el-table-column prop="hanguptime" label="接通时间"></el-table-column>
            <el-table-column prop="answertime" label="挂断时间"></el-table-column>
            <el-table-column label="操作" width="120"></el-table-column>
          </el-table>

          <!-- 固定表头（单独表格） -->
          <!--          <div class="header-table">-->
          <!--            <el-table :data="[]" style="width: 100%">-->
          <!--              <el-table-column label="序号" type="index" width="50"></el-table-column>-->
          <!--              <el-table-column prop="callee" label="被叫号码" width="120"></el-table-column>-->
          <!--              <el-table-column label="风险评级" prop="riskLevel" width="120"></el-table-column>-->
          <!--              <el-table-column prop="type" label="诈骗类型"></el-table-column>-->
          <!--              <el-table-column prop="hanguptime" label="接通时间"></el-table-column>-->
          <!--              <el-table-column prop="answertime" label="挂断时间"></el-table-column>-->
          <!--              <el-table-column label="操作" width="120"></el-table-column>-->
          <!--            </el-table>-->
          <!--          </div>-->
          <!--          &lt;!&ndash; 滚动内容区域 &ndash;&gt;-->
          <!--          <div class="body-table">-->
          <!--            <AutoScrollTable-->
          <!--              :fetch-data="loadTableA"-->
          <!--              :columns="columnsA"-->
          <!--              @detail="handleDetailA"-->
          <!--            />-->
          <!--          </div>-->
        </div>
      </div>
      <div class="bottom-modules02">
        <div class="title"><div class="title-inner">未完成</div></div>
        <div class="content">
          <!-- 固定表头（单独表格） -->
          <div class="header-table">
            <el-table :data="[]" style="width: 100%">
              <el-table-column label="序号" type="index" width="50"></el-table-column>
              <el-table-column prop="callee" label="被叫号码" width="120"></el-table-column>
              <el-table-column prop="type" label="诈骗类型"></el-table-column>
              <el-table-column prop="reason" label="未接原因"></el-table-column>
              <!-- <el-table-column label="操作" width="120"></el-table-column> -->
            </el-table>
          </div>

          <!-- 滚动内容区域 -->
          <div class="body-table">
            <AutoScrollTable
              :showTodo="false"
              :fetch-data="loadTableB"
              :columns="columnsB"
              @detail="handleDetailB"
            />
          </div>

        </div>
      </div>

      <ChatDetailDialog
        :visible="detailDialogVisible"
        @update:visible="val => detailDialogVisible = val"
        :title="detailDialogTitle"
        :dialogData="detailDialogData"
        :riskKeyword="riskKeyword"
      />
    </div>
  </div>
</template>
<script>
// import vueSeamlessScroll from 'vue-seamless-scroll';
import aiApi from "@/api/ai.api";
import AutoScrollTable from './autoScrollTable.vue';
import ChatDetailDialog from '@/components/aiChatDialog/aiChatDialog.vue';
import WebSocketService from "@/utils/websocket/websocket";

export default {
  components: {
    ChatDetailDialog,
    AutoScrollTable
  },
  watch: {
    callDetailData: {
      deep: true,
      handler(newVal) {
        const isHighLV = newVal.some(item =>
          item.data?.talkType === 2 && item.data?.talkContent?.includes('派出所')
        );

        if (isHighLV && !this.hasShownAlert) {
          this.hasShownAlert = true;
          setTimeout(() => {
            this.$alert('高危风险预警，推送至派出所见面劝阻', '提示', {
              confirmButtonText: '确定'
            });
          }, 1000 * 3);
        }
      }
    }
  },
  computed: {
    riskLevel() {
      const isHighLV = this.callDetailData?.some(item =>
        item?.data?.talkType === 2 && item?.data?.talkContent?.includes('派出所')
      )
      // 高危风险预警，推送至派出所见面劝阻
      return isHighLV ? '高' : '中'
      // return '高'
    }
  },
  data() {
    return {
      hasShownAlert: false,
      connectData: [],
      detailDialogTitle: '',
      detailDialogVisible: false,
      constants: {},
      currentTime: "",
      currentDate: "",
      currentDay: "",
      timeInterval: null,
      pieChart: [],
      progressData: [],
      defaultOption: {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      },
      callStatusData: null,
      fraudTypeData: [],
      columnsA: [
        { prop: 'callee', width: 120 },
        {prop: 'riskLevel', width: 120},
        { prop: 'type' },
        { prop: 'hanguptime' },
        { prop: 'answertime' }
      ],
      columnsB: [
        { prop: 'callee', width: 120 },
        { prop: 'type' },
        { prop: 'reason' }
      ],
      callDetailData: [
        {
          packType: 1, // 1:用户 0:系统消息
          name: '用户', // 用户名
          data: { talkType: 1, talkContent: '你好，我是用户' } // talkType: 1为用户, 2为民警
        },
        {
          packType: 1, // 1:用户 0:系统消息
          name: '民警', // 用户名
          data: { talkType: 2, talkContent: '你好，我是民警' }
        },
      ],
      wsService: null,
      detailDialogData: [],
      riskKeyword: ''
    };
  },
  created() {
    this._callStatus()
    // this._fraudType()
    // this._callDetail()
    // let wsUrl = "ws://106.14.71.50:5245/ws_event";
    let wsUrl = "ws://106.14.71.50:52456/ws_event";
    if(process.env.NODE_ENV === 'development') { //开发环境
      wsUrl = "ws://106.14.71.50:52456/ws_event"
    }

    this.wsService = new WebSocketService(wsUrl, this.handleMessage);
    this.wsService.connect();
  },
  mounted() {
    this._initFraudTypePie();
    this.fetchConnectList();

    this.updateTime();
    this.timeInterval = setInterval(this.updateTime, 1000);
  },
  beforeDestroy() {
    this.wsService.close();
    if (this.timeInterval) {
      clearInterval(this.timeInterval);
    }
  },
  methods: {
    checkHighRisk () {

    },
    // highlightRiskWords(msg) {
    //   const riskKeyword = this.riskKeyword; // 示例，实际你可以从data或props传入
    //   const keywords = riskKeyword.split(',').filter(k => k);
    //   let content = msg.talkContent || '';

    //   if (msg.talkType === 1 && keywords.length) {
    //     keywords.forEach(kw => {
    //       const pattern = new RegExp(`(${kw})`, 'gi');
    //       content = content.replace(pattern, '<span style="color:rgb(254, 108, 111);">$1</span>');
    //     });
    //   }
    //   return content;
    // },
    handleMessage(msg) {
      console.log("收到消息>>>>>>:", msg);
      // if(msg.packType === 1) {
      this.callDetailData.push(msg)
      console.log(this.callDetailData)
      // }
      this.$nextTick(this.scrollToBottom);
    },
    scrollToBottom() {
      const box = this.$refs.messageList;
      if (box) box.scrollTop = box.scrollHeight;
    },
    // 通话状态
    async _callStatus() {
      try {
        const response = await aiApi.callStatus()
        this.callStatusData = response.content
      } catch (error) {
        console.error('通话状态调用失败：', error)
        this.$message.error('通话状态调用失败')
      }
    },
    async _initFraudTypePie() {
      const response = await aiApi.fraudType()
      this.fraudTypeData = response.content
      this.pieChart = this.$echarts.init(document.getElementById('pieCharts'));
      this.progressData = this.fraudTypeData.map(item => {
        return {
          name: item.name,
          value: item.value
        };
      });
      let colorArr = ["#218de0", "#01cbb3", "#85e647", "#5d5cda", "#05c5b0", "#c29927"];
      let colorAlpha = ['rgba(60,170,211,0.05)', 'rgba(1,203,179,0.05)', 'rgba(133,230,71,0.05)', 'rgba(93,92,218,0.05)', 'rgba(5,197,176,0.05)', 'rgba(194,153,39,0.05)'];

      // 处理数据，确保value是数字，并循环使用颜色
      let processedData = this.progressData.map(function(item, index) {
        return {
          value: parseInt(item.value), // 确保value是数字
          name: item.name,
          itemStyle: {
            borderColor: colorArr[index % colorArr.length], // 循环使用颜色
            borderWidth: 2,
            shadowBlur: 20,
            shadowColor: colorArr[index % colorArr.length],
            shadowOffsetX: 25,
            shadowOffsetY: 20,
            color: colorAlpha[index % colorAlpha.length] // 循环使用半透明颜色
          }
        };
      });
      let option = {
        // backgroundColor: "#090e36",
        grid: {
          left: '15%',   // 改为百分比或具体像素值
          right: '15%',  // 右侧留更多空间
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          show: false
        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: 'category',
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B4A6B",
              width: 1,
              type: "solid"
            },
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 16
          },
        },
        radiusAxis: {
          min: 20,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B3E5E",
              width: 1,
              type: "solid"
            },
          },
          axisLabel: {
            formatter: '{value} %',
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: "#07385e",
              width: 2,
              type: "dashed"
            }
          }
        },
        calculable: true,
        series: [{
          stack: 'a',
          type: 'pie',
          radius: '80%',
          roseType: 'radius',
          zlevel: 10,
          startAngle: 100,
          label: {
            normal: {
              formatter: ['{b|{b}}', '{d|{d}%}'].join('\n'),
              rich: {
                b: {
                  width: 80,
                  color: '#3bd2fe',
                  fontSize: 14,
                  lineHeight: 20
                },
                d: {
                  color: '#d0fffc',
                  fontSize: 14,
                  height: 20
                },
              },
              position: 'outside',
              alignTo: 'edge',
              margin: 1
            }
          },
          labelLine: {
            normal: {
              show: true,
              length: 10,
              length2: 45,
              lineStyle: {
                color: '#0096b1'
              }
            },
            emphasis: {
              show: false
            }
          },
          data: processedData
        }]
      };
      this.pieChart.setOption(option);
    },
    // 涉诈类型
    async _fraudType() {
      try {
        const response = await aiApi.fraudType()
        this.fraudTypeData = response.content
      } catch (error) {
        console.error('状态调用失败：', error)
        this.$message.error('涉诈类型调用失败')
      }
    },
    async fetchConnectList() {
      try {
        const response = await aiApi.connectList({ pageNum: 1, pageSize: 20 });
        this.connectData = response.content.rows

        // return Array.isArray(response.content.rows) ? response.content.rows : [];
      } catch (error) {
        console.error('loadTableA调用失败：', error);
        this.$message?.error('获取loadTableA失败');
        this.connectData = []
        // return [];
      }

    },
    async loadTableA(page, size) {
      try {
        const response = await aiApi.connectList({ pageNum: page, pageSize: size });
        return Array.isArray(response.content.rows) ? response.content.rows : [];
      } catch (error) {
        console.error('loadTableA调用失败：', error);
        this.$message?.error('获取loadTableA失败');
        return [];
      }
    },

    async loadTableB(page, size) {
      try {
        const response = await aiApi.unconnectList({ pageNum: page, pageSize: size });
        return Array.isArray(response.content.rows) ? response.content.rows : [];
      } catch (error) {
        console.error('loadTableB调用失败：', error);
        this.$message?.error('获取loadTableB失败');
        return [];
      }
    },

    handleDetailA(row) {
      this.detailDialogTitle = `${row.callee}呼叫详情`
      this.riskKeyword = row.riskKeyword

      this.detailDialogData = JSON.parse(row.talkinfo).dialogs
      console.log('表A点击详情', row);
      this.detailDialogVisible = true
    },
    handleDetailB(row) {
      console.log('表B点击详情', row);
    },

    updateTime() {
      const now = new Date();

      // 时间
      this.currentTime = now.toLocaleTimeString("zh-CN", {
        hour12: false,
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit"
      });

      // 日期
      this.currentDate = now.toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit"
      }).replace(/\//g, ".");

      // 星期
      const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      this.currentDay = days[now.getDay()];
    }

  },
};
</script>
<style lang="stylus">
  // @import '@/assets/css/aiDiscouragementEle.styl'
  @import '../../assets/css/aiDiscouragementEle.styl'
  /* 滚动条整体 */
  ::-webkit-scrollbar {
    width: 6px;
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: rgba(67,84,89,0.4);
    border-radius: 4px;
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background-color: rgba(18,28,31,0.25);
    border-radius: 4px;
  }

  .ai-discouragement{
    display: flex;
    flex-direction: column;


    &.wrapper{
      background: linear-gradient(90deg, #000000, #030F0F);
      background: url('./img/page_bg.png') no-repeat 0 0;
      background-size: 100% 100%;

      color: #fff;
      padding: 10px;
      height: 100vh;
      box-sizing: border-box;
      // height: 100%;
      // overflow: auto;
    }
    .top-modules{
      padding: 0 25px;
      background: url('./img/title_bg.png') no-repeat 0 0;
      //background-size: 1911px 82px;
      background-size: 100% 100%;
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2{
        height: 51px;
        font-family: YouSheBiaoTiHei;
        font-size: 36px;
        line-height: 50px;
        letter-spacing: 10px;
        text-shadow: 0px 0px 8px rgba(94,228,255,0.38);
      }
    }
    .center-modules{
      display: flex;
      //margin-bottom: 20px;
      flex: 1;
      gap: 20px;
      .center-modules01{
        display: flex;
        flex-direction: column;
        width: 30%;
        //margin-right: 20px;
        height: 100%;
        gap: 20px;
        .title{
          font-size: 16px;
          color: #FFFFFF;
          height: 32px;
          line-height: 32px;
          margin-bottom: 3px;
          //background: #12303a;
          .title-inner{
            position: relative;
            z-index: 1;
            padding-left: 65px;
            &::before{
              z-index: -1;
              content: "";
              position: absolute;
              bottom: 0;
              right: 0;
              height: 100%;
              width: 100%;
              background: url("./img/item_title_bg.png") no-repeat 0 0;
              background-size: 200px 100%;
            }
            //&::after{
            //  z-index: -2;
            //  content: "";
            //  position: absolute;
            //  bottom: 0;
            //  right: 0;
            //  height: 100%;
            //  width: 100%;
            //  background: url("./img/item_title_bg_bg.png") no-repeat right 0;
            //}
          }

        }
        .content{
          background: rgba(18, 28, 31, 0.25);
          padding: 14px;
          border: 6px solid rgba(67, 84, 89, 0.40);
        }
        .count-box{
          display: flex;
          margin-bottom: 18px;
        }
        .count-box-img{
          margin-right: 10px;
          width: 56px;
          height: 56px;
          overflow: hidden;
        }
        .count-box-item{
          flex: 1;
          display: flex;
          align-items: center;
          color: #D6FDFC;
          font-size: 14px;
        }
        .item-error {
          color: #F56C6C;
        }
        .count-box-text{
          p{
            height: 26px;
            line-height: 26px;
          }
          .number{
            color: #D6FDFC;
            font-size: 18px;
            text-shadow: 0 0 13px rgba(118, 207, 143, 1);
          }
        }

        .count-detail-item{
          display: flex;
          align-items: center;
          box-sizing: border-box;
          height: 36px;
          padding: 5px 10px;
          font-size: 12px;
          color: #FFFFFF;
          background: linear-gradient( 180deg, rgba(12, 30, 44, 0.52) 0%, rgba(51, 112, 143, 0.25) 70%, rgba(50, 88, 144, 0.69) 100%);
          border-top: 1px solid #3774A2;
          border-bottom: 1px solid #3774A2;
          margin-bottom: 16px;
          &:last-child{
            margin-bottom: 0;
          }
          .count-detail-icon{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 25px;
            height: 24px;
            overflow: hidden;
            margin-right: 13px;
            font-size: 18px;
            //background: rgba(216, 216, 216, 1);
          }
          .count-detail-text{
            width: 36%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 5px;
          }
          .number{
            font-size: 16px;
            color: #D6FDFC;
            text-shadow: 0 0 13px rgba(118, 207, 143, 1);
            margin-right: 5px;
          }
        }
      }
      .center-modules01-01,
      .center-modules01-02{
        flex: 1;
      }
      //.center-modules01-01{
      //  margin-bottom: 20px;
      //}
      .center-modules02{
        width: calc(70% - 20px);
        height: 100%;
        background: url("./img/chat_bg.png") no-repeat center center;
        background-size: 100% 100%;

        .risk-level {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: 2px;
          .el-alert__icon, .el-alert__title {
            font-size: 18px!important;
          }
        }
        .title{
          font-size: 16px;
          color: #FFFFFF;
          height: 32px;
          line-height: 32px;
          margin-bottom: 3px;
          //background: #12303a;
          .title-inner{
            position: relative;
            z-index: 1;
            padding-left: 65px;
            &::before{
              z-index: -1;
              content: "";
              position: absolute;
              bottom: 0;
              right: 0;
              height: 100%;
              width: 100%;
              background: url("./img/item_title_bg.png") no-repeat 0 0;
              background-size: 200px 100%;

            }
            //&::after{
            //  z-index: -2;
            //  content: "";
            //  position: absolute;
            //  bottom: 0;
            //  right: 0;
            //  height: 100%;
            //  width: 100%;
            //  background: url("./img/item_title_bg_bg.png") no-repeat right 0;
            //}
          }
        }
        @keyframes yellowPulse {
          0%, 100% {
            background: rgba(230, 162, 60, 0);
            box-shadow: 0 0 5px rgba(230, 162, 60, 0);
            filter: blur(0.5px); /* 更明显的模糊 */
          }
          50% {
            background: #E6A23C;
            box-shadow:  0 0 15px rgba(230, 162, 60, 1);
            filter: blur(1.5px); /* 更明显的模糊 */
          }
        }
        @keyframes redPulse {
          0%, 100% {
            background-color: transparent;
            filter: blur(.5px); /* 更明显的模糊 */
          }
          50% {
            background-color: #F56C6C;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
            filter: blur(1.5px); /* 更明显的模糊 */
          }
        }
        .warning-border {
          position: relative;
          &::before {
            content: '';
            height: 36px;
            position: absolute;
            top: -6px;
            left: -6px;
            right: -6px;
            //bottom: -6px;
            border: 6px solid transparent;
            border-radius: inherit;
            animation: yellowPulse 2s infinite;
            pointer-events: none;
            z-index: 0;
          }
        }

        .error-border {
          position: relative;
          &::before {
            content: '';
            height: 36px;
            position: absolute;
            top: -6px;
            left: -6px;
            right: -6px;
            //bottom: -6px;
            border: 6px solid transparent;
            border-radius: inherit;
            animation: redPulse 1.5s infinite;
            pointer-events: none;
            z-index: 0;
          }
        }

        .content{
          position: relative;

          padding: 24px;
          border: 6px solid rgba(67, 84, 89, 0.40);
          box-sizing: border-box;
          height: calc(100% - 32px);
          //background: rgba(18, 28, 31, 0.25);

        }

        .chat-container{
          display: flex;
          flex-direction: column;
          margin: 20px;
          height: 400px;
          overflow: auto;
          .message{
            display: flex;
            margin-bottom: 15px;
            align-items: flex-start;
            width: 100%;

            .message-line{
              position: relative;
              width: 100%;
              text-align: center;
              color: #d6fdfc;
              font-size: 13px;
              &::before,
              &::after{
                content: "";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                width: 40%;
                background: rgba(107, 230, 200, 0.22);
                height: 1px;
              }
              &::before{
                left: 0;
              }
              &::after{
                right: 0;
              }
            }

            &.user{
              justify-content: flex-end;
              .avatar{
                order: 2
                margin-left: 20px;
              }
              .message-content{
                order: 1;
                &::after{
                  right: -20px;
                  border-right: 10px solid transparent;
                  border-left: 10px solid rgba(82,155,215,0.45);
                }
              }
            }

            &.admin{
              justify-content: flex-start
              .avatar{
                order: 1;
                margin-right: 20px;
              }
              .message-content{
                order: 2
                &::after{
                  left: -20px;
                  border-left: 10px solid transparent;
                  border-right: 10px solid rgba(82,155,215,0.45);
                }
              }
            }

            .avatar{
              width: 30px;
              height: 30px;
              border-radius: 50%;
              img{
                border-radius: 50%;
                width: 100%;
              }
            }
          }

          .message-content{
            max-width: 400px;
            padding: 10px;
            border-radius: 2px;
            background-color: rgba(82, 155, 215, 0.45);
            position: relative;
            font-size: 16px;
            line-height: 22px;
            color: #fff;
            opacity: 0.8;

            &::after{
              content: '';
              position: absolute;
              width: 0;
              height: 0;
              border-top: 10px solid transparent;
              border-bottom: 10px solid transparent;
              top: 10px;
            }

            .message-header{
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              color: #bbb;
            }

            .message-body{
              display: flex;
              align-items: center;
              font-size: 18px;
            }
            .speech-icon{
              margin-right: 10px;
              font-size: 18px;
              color: #00bcd4;
            }
          }
        }

      }

      .center-modules01-02{
        display: flex;
        flex-direction: column;
        .content {
          flex: 1;
        }
        .progress-container {
          height: 100%;
        }

        .progress-item {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          &:last-child{
            margin-bottom: 0;
          }
        }

        .label {
          width: calc(30% - 10px);
          margin-right: 10px;
          white-space: nowrap;
          text-align: right;
          font-size: 12px;
          color: #fff;
        }

        .progress-bar {
          // width: 100%;
          display: flex;
          align-items: center;
          width: 80%;
          position: relative;
          overflow: hidden;
          height: 22px;
          &::before{
            content: "";
            width: 1px;
            height: calc(100% + 2px);
            position: absolute;
            top: -1px;
            left: 0;
            background: #fff;
          }
        }
        .progress-bg{
          width: 105%;
          height: 22px;
          background-color: rgba(215, 219, 219, 0.20);  /* 背景色，和进度条底部颜色一致 */
          position: absolute;
          top: -9px;
          left: 0;
          z-index: 1;
        }

        .progress {
          position: relative;
          height: 4px;
          background-image: repeating-linear-gradient(90deg, rgba(195, 195, 195, 0.50) 0%, rgba(195, 195, 195, 0.50) 40%, transparent 40%, transparent 50%, rgba(195, 195, 195, 1) 50%, rgba(195, 195, 195, 1) 90%, transparent 90%, transparent 100%)
          background-size: 50px 4px;
          background-repeat: repeat-x;
          transition: width 0.3s;

        }
      }
    }

    .bottom-modules{
      display: flex;
      flex: 1;
      gap: 20px;
      //height: calc(100% - 190px);
      .title{
        font-size: 16px;
        color: #FFFFFF;
        height: 32px;
        line-height: 32px;
        margin-bottom: 3px;
        //background: #12303a;
        .title-inner{
          height: 100%;
          position: relative;
          z-index: 1;
          padding-left: 65px;
          .el-tabs {
            height: 100%;
          }
          &::before{
            z-index: -1;
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            height: 100%;
            width: 100%;
            background: url("./img/item_title_bg.png") no-repeat 0 0;
            background-size: 200px 100%;

          }
        }
      }
      .content{
        background: rgba(18, 28, 31, 0.25);
        padding: 10px;
        border: 6px solid rgba(67, 84, 89, 0.40);
        height: calc(100% - 40px);
        box-sizing: border-box;
        overflow: hidden;
      }
      .seamless-warp{
        height: calc(100% - 40px);
        overflow: hidden;
      }

      .header-table, .body-table {
        width: 100%;
      }

      /* 固定表头 */
      .header-table {
        height: 30px;
        overflow: hidden;
      }

      /* 内容区域滚动设置 */
      .body-table {
        // height: 100px; /* 根据需求调整高度 */
        overflow: hidden;
      }
    }
    .bottom-modules01{
      width: 60%;
      //margin-right: 20px;
      .title-inner {
        display: flex;
        justify-content: space-between;
        .el-tabs__item {
          color: #fff;
          height: 18px;
          line-height: 18px;
          &.is-active {
            color: #4af6f6;
            border-bottom: none;
          }
        }
        .el-tabs__nav {
          border: 1px solid #4af6f6;
        }
      }
    }
    .bottom-modules02{
      width: 40%;
      //width: calc(40% - 20px);
    }
  }


  
  
  /* 在全局 CSS 或 App.vue 中添加 */
  @media (min-width: 3680px) {
    .ai-discouragement {
      transform: scale(2.1); /* 4K是1920的2倍 */
      transform-origin: 0 0;
      width: 50%;  /* 缩放后实际占用的宽度 */
      height: 60%; /* 缩放后实际占用的高度 */
      .section_1 {
        transform: translateY(20px);
      }
    }
  }
  /* 在全局 CSS 或 App.vue 中添加 */
  @media (min-width: 7680px) {
    .ai-discouragement {
      transform: scale(4); /* 8K / 1920 = 4 */
      transform-origin: 0 0;
      width: 25%; /* 缩放后宽度还原为 1920px */
      height: 25%; /* 缩放后高度还原为 1080px */
    }
  }

</style>
<style lang="stylus">
  /deep/ .el-main  {
    padding: 0!important;
  }
</style>